<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 15px;
            height:15px;
            background-image: url("../img/自行车.png");
            margin: 0 auto;
            margin-top: 100px;
            /*
            steps：一共有32个自行车，以上来就是第一个，所有从31步开始，
            这里不能用平滑，因为能看出头在不停的替换，因该保持头是一个头
            所以用steps一窜一窜的，这个31步数一定要算对，不然感觉是在往上滑动，
            这里没有图是截图，所以就是往上滑的
            infinite：无限播放
            如果想让他块一下就把时间挑短
            前提：
            1、有一个好图
            2、steps步数要算对，不然是往上滑的
            2、
            */
            animation: zxc 0.5s steps(31) infinite;
        }
        /*动画名称*/
        @keyframes zxc {
            from{
                /*默认0*/
            }
            to{
                /*
               自行车.png 图片是一个长图，高度是4020，
               让背景从4020往上滑动到0，
               类似于一个窗口，窗口外面图片在外面网上滚动就形成了动画
                */
                background-position:0px -4020px;
            }
        }
    </style>
</head>
<body>

</body>
<div></div>
</html>